<template>
  <nm-container>
    <el-form label-width="80px" :inline="true" style="background:white; padding:20px" ref="form">
      <el-row :gutter="20">
        <el-form-item label="日期" prop="station_id">
          <el-date-picker v-model="formList.startDate" clearable type="date" placeholder="选择日期" style="width:200px" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
        </el-form-item>
        <el-form-item label="出发站" prop="station_id">
          <el-select v-model="formList.startStationId" filterable clearable placeholder="请选择班次">
            <el-option v-for="item in stationList" :key="item.id" :label="item.station_name" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客票号" prop="station_id">
          <el-input v-model="formList.startTicketNum" placeholder="客票号" />
        </el-form-item>
        <el-form-item label="证件号" prop="station_id">
          <el-input v-model="formList.cardId" placeholder="证件号" />
        </el-form-item>
        <el-button type="primary" @click="inquire">查询客票信息</el-button>
      </el-row>

      <!-- 客票信息 -->
      <div v-if="message">
        <span class="hint">客票信息</span>
        <el-table highlight-current-row max-height="150px" ref="topictable" :data="detailList" border align="center" :header-cell-style="{ 'text-align': 'center', 'font-weight': 'bold', color: '#030202' }" :cell-style="{ 'text-align': 'center' }" style="width: 100%;text-align: center;">
          <el-table-column label="" width="40">
            <template slot-scope="scope">
              <el-radio :label="scope.$index" v-model="radio" @change.native="currentRow(scope.row)" style="color: #fff;padding-left: 5px; "></el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="passengerName" label="姓名"> </el-table-column>
          <el-table-column prop="busDate" label="日期">
            <template slot-scope="scope">
              <span>{{ getDateFun(scope.row.busDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="busNum" label="车次"> </el-table-column>
          <el-table-column prop="startTime" label="时间"> </el-table-column>
          <el-table-column prop="startStationName" label="出发站"> </el-table-column>
          <el-table-column prop="targetName" label="到达站"> </el-table-column>
          <el-table-column prop="endStationName" label="终点站"> </el-table-column>
          <el-table-column prop="isTakeChild" label="携童">
            <template slot-scope="scope">
              <span>{{ scope.row.isTakeChild == true ? '是' : '否' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ticketStatus" label="客票状态">
            <template slot-scope="scope">
              <span style="color:red">{{
                scope.row.ticketStatus == 0
                  ? '锁票'
                  : scope.row.ticketStatus == 1
                  ? '已售'
                  : scope.row.ticketStatus == 2
                  ? '已废'
                  : scope.row.ticketStatus == 3
                  ? '已取'
                  : scope.row.ticketStatus == 4
                  ? '已改签'
                  : scope.row.ticketStatus == 5
                  ? '已退票'
                  : '已检票'
              }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
    <span class="hint">查询班次信息</span>
    <el-form label-width="80px" :inline="true" style="background:white; padding:20px" ref="form">
      <el-row :gutter="20">
        <el-form-item label="日期" prop="station_id">
          <el-date-picker v-model="form.busDate" clearable type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
        </el-form-item>
        <el-form-item label="时间段" prop="station_id">
          <el-select v-model="departTime" placeholder="请选择" @change="getDepartTime" clearable>
            <el-option label="00:00-06:00" value="00:00-06:00"></el-option>
            <el-option label="06:00-12:00" value="06:00-12:00"></el-option>
            <el-option label="12:00-18:00" value="12:00-18:00"></el-option>
            <el-option label="18:00-24:00" value="18:00-24:00"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="getClasses">查询班次信息</el-button>
      </el-row>
    </el-form>

    <!-- 班次信息 -->
    <span class="hint">只允许改签同线路、同票价的班次</span>
    <el-table highlight-current-row max-height="200px" @current-change="handleCurrentChange" ref="topictable" :data="getList" border align="center" :header-cell-style="{ 'text-align': 'center', 'font-weight': 'bold', color: '#030202' }" :cell-style="{ 'text-align': 'center' }" style="width: 100%;text-align: center;">
      <el-table-column prop="startDate" label="日期" width="120">
        <template slot-scope="scope">
          <span>{{ getDateFun(scope.row.startDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="startStationName" label="上车站" width="80"> </el-table-column>
      <el-table-column prop="busNum" label="车次" width="80"> </el-table-column>
      <el-table-column prop="startTime" label="时间" width="130"> </el-table-column>
      <el-table-column prop="startStationName" label="出发站" width="150"> </el-table-column>
      <el-table-column prop="targetName" label="到达站" width="150"> </el-table-column>
      <el-table-column prop="endStationName" label="终点站" width="150"> </el-table-column>
      <el-table-column prop="seats" label="座位"> </el-table-column>
      <el-table-column prop="remainSeats" label="余票"> </el-table-column>
      <el-table-column prop="childSeats" label="免童"> </el-table-column>
      <el-table-column prop="price" label="全价"> </el-table-column>
      <el-table-column prop="soldSeat" label="车辆等级"> </el-table-column>
      <el-table-column prop="checkPort" label="检票口"> </el-table-column>
      <el-table-column prop="milage" label="里程" width="100"> </el-table-column>
    </el-table>
    <el-dialog title="修改" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>是否确定修改为{{ this.form.busDate }},{{ this.checked.startTime }}的班次</span>
      <div class="serviceCharge">
        <span style="margin-top:10px">
          手续费：
        </span>
        <el-input placeholder="请输入手续费" v-model="changeFee" style="width:35%"> </el-input>
        <span style="margin-top:10px">
          元
        </span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="seatVisible" width="30%" :before-close="handleClose">
      <span>是否确定修改为{{ this.getDateFun(this.form.busDate) }},{{ this.checked.startTime }}的班次,座位号为{{ this.seat }}</span>
      <div class="serviceCharge">
        <span style="margin-top:10px">
          手续费：
        </span>
        <el-input placeholder="请输入手续费" v-model="changeFee" style="width:35%"> </el-input>
        <span style="margin-top:10px">元</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="seatVisible = false">取 消</el-button>
        <el-button type="primary" @click="modification">确 定</el-button>
      </span>
    </el-dialog>
    <el-pagination background layout="prev, pager, next" :total="total / 10" />
    <save-page :id="curr.id" :visible.sync="dialog.save" @success="refresh" />
    <div v-if="selectSeat" class="Box">
      <span class="title">座位表</span>
      <ul class="flex" style="height:100px">
        <li class="" v-for="(item, index) in ticket" :key="index" @click="chose(item)">
          <p v-if="item.status === 0" class="unsold">{{ item.seatNum }}</p>
          <p v-else class="pitch">{{ item.seatNum }}</p>
        </li>
      </ul>
    </div>
  </nm-container>
</template>
<script>
import { mixins } from 'netmodular-ui'
import page from './page'
// import cols from './cols'
import SavePage from '../components/save'
const api = $api.dispatch.change_ticket

export default {
  name: page.name,
  mixins: [mixins.list],
  components: { SavePage },
  data() {
    return {
      radio: '',
      tickType: [],
      formList: {
        startDate: '',
        startStationId: '',
      },
      detailList: [],
      message: false,
      form: {
        busDate: '',
      },
      changeFee: '',
      getList: [],
      height: 300,
      dialogVisible: false,
      ticket: [],
      selectSeat: false,
      seatVisible: false,
      seat: '',
      vehicleList: [],
      stationList: [],
      detail: '',
      checked: '',
      departTime: '',
      startTime: '',
      endTime: '',
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.height = window.innerHeight - this.$refs.topictable.$el.offsetTop - 150
    })
    this.getTicketType()
    this.getForseLect()
    this.getStation()
    this.addDate()
    this.getStart()
  },

  methods: {
    // 选择一张客票
    currentRow(row) {
      console.log(row)
      this.detail = row
    },
    //  出发时间筛选
    getDepartTime(val) {
      this.startTime = val.split('-')[0]
      this.endTime = val.split('-')[1]
    },
    //获取默认出发车站
    getStart() {
      api.getstartstation().then((res) => {
        this.formList.startStationId = res[0].id
      })
    },
    //选择班次
    handleCurrentChange(data) {
      if (data.isWater == false) {
        api.getrunbusseatinfo({ busDate: data.startDate, busNum: data.busNum }).then((res) => {
          if (res.length == 0) {
            this.selectSeat = false
          } else {
            this.selectSeat = true
            this.ticket = res
          }
        })
      }
      this.checked = data
      //按下回车提交
      document.onkeydown = () => {
        if (window.event.keyCode == 13) {
          // 监听Enter键，进行改签
          this.dialogVisible = true
        }
      }
    },
    // 获取班次列表
    getForseLect() {
      api.querybusinfoforselect().then((res) => {
        this.vehicleList = res
      })
    },
    //获取出发站点
    getStation() {
      api.stationQuery().then((res) => {
        this.stationList = res.rows
      })
    },
    //获取票种
    getTicketType() {
      api.ticketTypeQuery().then((res) => {
        var arr = res.rows.map((item) => {
          return { value: item.id, label: item.ticekt_type_name }
        })
        this.tickType = arr
      })
    },
    //查询客票信息
    inquire() {
      api.getorderinfo(this.formList).then((res) => {
        if (res.length == 0) {
          this.$message({
            message: '未查询到信息',
            type: 'warning',
          })
          this.detailList = []
        } else {
          this.message = true
          this.detailList = res
        }
      })
    },
    //获取班次
    getClasses() {
      this.selectSeat = false
      if (this.detail.targetId == undefined) {
        this.$message({
          message: '请选择一条客票信息',
          type: 'warning',
        })
      } else {
        api.queryrunbusinfo({ startStationId: this.detail.startStationId, targetCode: this.detail.targetId, busDate: this.form.busDate }).then((res) => {
          if (res.length == 0) {
            this.selectSeat = false
            this.$message({
              message: '未查询到班次',
              type: 'warning',
            })
            this.getList = []
          } else {
            if (this.startTime == '') {
              this.getList = res
            } else {
              var a = res.filter((e) => {
                let startTime = e.startTime.split(':')[0]
                let newstartTime = this.startTime.split(':')[0]
                let newendTime = this.endTime.split(':')[0]
                return startTime >= newstartTime && startTime < newendTime
              })
              this.getList = a
            }
          }
        })
      }
    },
    handleClose() {
      this.seatVisible = false
      this.dialogVisible = false
      this.$emit('hide')
    },
    // 修改班次
    confirm() {
      if (this.changeFee == '') {
        this.$message({
          message: '请输入改签手续费',
          type: 'warning',
        })
      } else {
        api
          .changeticket({ ticketId: this.detail.id, runBusId: this.checked.id, newTicketNum: this.detail.paperTicketNum, changeFee: this.changeFee })
          .then((res) => {
            this.$message({
              message: '改签成功',
              type: 'success',
            })
            this.inquire()
            this.dialogVisible = false
            console.log(res)
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },
    //点击单独选座
    chose(val) {
      if (val.status == 0) {
        this.seatVisible = true
        this.seat = val.seatNum
      } else {
        this.$message({
          message: '此座位已售',
          type: 'warning',
        })
      }
    },
    //修改班次 选座
    modification() {
      if (this.changeFee == '') {
        this.$message({
          message: '请输入改签手续费',
          type: 'warning',
        })
      } else {
        api.changeticket({ ticketId: this.detail.id, runBusId: this.checked.id, seatNum: this.seat, newTicketNum: this.detail.paperTicketNum, changeFee: this.changeFee }).then((res) => {
          this.$message({
            message: '改签成功',
            type: 'success',
          })
          this.inquire()
          this.seatVisible = false
          console.log(res)
        })
      }
    },

    // 获取今天年月日
    addDate() {
      let nowDate = new Date()
      let date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
      }
      this.formList.startDate = date.year + '-' + date.month + '-' + date.date
      this.form.busDate = date.year + '-' + date.month + '-' + date.date
    },

    //格式化日期
    getDateFun(num) {
      var d = new Date(num)
      var y = d.getFullYear()
      var m = d.getMonth() + 1 < 10 ? `0${d.getMonth() + 1}` : d.getMonth() + 1
      var day = d.getDate() < 10 ? `0${d.getDate()}` : d.getDate()
      return `${y}-${m}-${day}`
    },
  },
}
</script>

<style scoped>
.Box {
  background: #ccc;
  height: 200px;
  width: 18%;
  position: fixed;
  bottom: 0;
}
.title {
  margin-left: 38%;
}
.flex {
  display: flex;
  flex-wrap: wrap;
}
.flex li {
  text-align: center;
  line-height: 20px;
  margin: 5px;
  font-size: 15px;
}
.flex li p {
  width: 20px;
}
.pitch {
  background-color: red;
}
.unsold {
  background: green;
}
.hint {
  color: red;
}
.serviceCharge {
  display: flex;
  margin-top: 20px;
}
</style>
